<template>
	<view class="page">
		<!-- 轮播图 -->
		<swiper class="scroll-view" scroll-x="true" indicator-dots="true" autoplay="true">
			<swiper-item v-for="(item,index) in carousel" :key="item.image">
				<view class="scroll-view" :data-movieId="item.movieId" @click="details">
					<image :src="item.image" class="scroll-view"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 热门超英 -->
		<view class="superhero">
			<!-- 标题 -->
			<view class="superhero-title">
				<image class="superhero-title-img" src="../../static/icon/hot.png"></image>
				<view class="superhero-title-name">热门超英</view>
			</view>
			<!-- 展示列表 -->
			<scroll-view class="superhero-container" scroll-x>
				<view class="superhero-show">
					<view class="superhero-items" v-for="item in superhero" :key="item.id">
						<view class="superhero-item" :data-movieId="item.id" @click="details">
							<image class="superhero-items-img" :src="item.cover"></image>
							<view class="superhero-items-name">{{item.name}}</view>
							<star :score="item.score" :showscore="1"></star>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 热门预告 -->
		<view class="hot-movies">
			<!-- 标题 -->
			<view class="superhero-title">
				<image class="superhero-title-img" src="../../static/icon/interest.png"></image>
				<view class="superhero-title-name">热门预告</view>
			</view>

			<view class="hot-movies-container">
				<video :id="item.id" class="hot-movies-item" :data-videoId="item.id" @play="playVideo" v-for="item in trailer" :key="item.id"
				 :src="item.trailer" :poster="item.poster"></video>
			</view>

		</view>
		<!-- 猜你喜欢 -->
		<view class="guessULike">
			<!-- 标题 -->
			<view class="superhero-title">
				<image class="superhero-title-img" src="../../static/icon/guess-u-like.png"></image>
				<view class="superhero-title-name">猜你喜欢</view>
			</view>


			<view class="guessULike-item" v-for="(like,lindex) in guessULike" :key="like.id">
				<image class="guessULike-item-img" :src="like.cover" :data-movieId="like.id" @click="details"></image>
				<view class="guessULike-item-info">
					<view class="guessULike-item-title">{{like.name}}</view>
					<star :score="like.score" :showscore="0"></star>
					<view class="guessULike-item-basicInfo">{{like.basicInfo}}</view>
					<view class="guessULike-item-releaseDate">{{like.releaseDate}}</view>
				</view>
				<view class="guessULike-item-oper" :data-lindex="lindex" @click="praiseMe">
					<image class="guessULike-item-oper-img" src="../../static/icon/praise.png"></image>
					<view class="guessULike-item-oper-title">赞一下</view>
					<view :animation="animationDataArr[lindex]" class="guessULike-item-oper-num">+1</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import star from "../../components/star.vue"
	export default {
		data() {
			return {
				carousel: [],
				superhero: [],
				trailer: [],
				guessULike: [],
				animationData: {},
				animationDataArr: []
			}
		},
		components: {
			star
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '拼命加载中...',
				mask: true //防止加载中的其他事件发生
			})
			// 猜你喜欢
			// 猜你喜欢
			this.$store.dispatch("GetGuessULike").then(data => {
				this.guessULike = data.data;
			}).finally(() => {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
				uni.hideLoading()
			});
		},
		onUnload() {
			// 页面卸载的时候清除动画数据
			this.animationData = {};
			this.animationDataArr = []
		},
		onLoad() {
			// 在页面创建的时候创建一个临时的动画对象
			// #ifdef APP-PLUS ||MP-WEIXIN
			this.animation = uni.createAnimation();
			// #endif
			// 轮播图
			this.$store.dispatch("GetCarousel").then(data => {
				this.carousel = data.data;
			});
			// 热门超英
			this.$store.dispatch("GetSuperHero").then(data => {
				this.superhero = data.data;
			});
			// 热门预告
			this.$store.dispatch("GetTrailer").then(data => {
				this.trailer = data.data;
			});
			// 猜你喜欢
			this.$store.dispatch("GetGuessULike").then(data => {
				this.guessULike = data.data;
			});
		},
		methods: {
			// 点赞的动画效果
			praiseMe(e) {
				// #ifdef APP-PLUS ||MP-WEIXIN
				var lindex = e.currentTarget.dataset.lindex;
				// 构建动画数据，并且通过step来表示这组动画的完成
				this.animation.translateY(-60).opacity(1).step({
					duration: 400
				});
				// 到处动画到view组件，实现组件动画的效果
				this.animationData = this.animation;
				this.animationDataArr[lindex] = this.animationData.export();
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					})
					this.animationData = this.animation;
					this.animationDataArr[lindex] = this.animationData.export();
				}.bind(this), 600);
				// #endif
			},
			// 播放一个视频时，其他视频需要暂停
			playVideo(e) {
				var videoId;
				if (e) {
					videoId = e.currentTarget.dataset.videoid;
					this.videoContext = uni.createVideoContext(videoId);
				}
				for (var i = 0; i < this.trailer.length; i++) {
					var trailerId = this.trailer[i].id;
					if (trailerId != videoId) {
						uni.createVideoContext(trailerId).pause()
					}
				}
			},
			details(e) {
				var movieId = e.currentTarget.dataset.movieid;
				uni.navigateTo({
					url: "../details/details?movieId=" + movieId
				})
			}
		}
	}
</script>

<style>
	.scroll-view {
		width: 100%;
		height: 440upx;
	}

	/* 热门超英 */
	.superhero {
		padding-bottom: 10upx;
		margin-bottom: 20upx;
		background: white;
	}

	.superhero-title {
		display: flex;
		padding: 20upx;
		flex-direction: row;
		align-items: center;
	}

	.superhero-title-img {
		width: 30upx;
		height: 30upx;
		margin-right: 20upx;
	}

	.superhero-title-name {
		font-size: 20px;
		font-weight: 700;
	}

	.superhero-show {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.superhero-item {
		width: 200upx;
	}

	.superhero-items {
		display: flex;
		flex-direction: column;
		margin-left: 20upx;
		justify-content: space-between;
	}

	.superhero-items-img {
		width: 200upx;
		height: 260upx;
	}

	.superhero-items-name {
		width: 200upx;
		font-size: 14px;
		font-weight: 700;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 热门预告 */
	.hot-movies {
		background: white;
	}

	.hot-movies-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 20upx 20upx 20upx;
		justify-content: space-between;
	}

	.hot-movies-item {
		width: 350upx;
		height: 220upx;
		margin-top: 10upx;
	}

	/* 猜你喜欢 */
	.guessULike {
		background: white;
		display: flex;
		flex-direction: column;
	}

	.guessULike-item {
		display: flex;
		padding: 30upx 20upx;
		flex-direction: row;
		justify-content: space-between;
	}

	.guessULike-item-img {
		width: 180upx;
		height: 240upx;
		border-radius: 3%;
	}

	.guessULike-item-info {
		width: 360upx;
		display: flex;
		flex-direction: column;
	}

	.guessULike-item-title {
		margin-bottom: 10upx;
		font-size: 36upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.guessULike-item-basicInfo,
	.guessULike-item-releaseDate {
		color: grey;
		font-size: 14px
	}

	.guessULike-item-oper {
		width: 140upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-left: 4upx dashed #dbdbda;
	}

	.guessULike-item-oper-img {
		width: 40upx;
		height: 40upx;
	}

	.guessULike-item-oper-title {
		font-size: 14px;
		color: #feab2a;
	}

	.guessULike-item-oper-num {
		font-size: 14px;
		color: #feab2a;
		opacity: 0;
	}
</style>
